<template>
	<div>
		<!-- 添加与搜索区域 -->
		<Row type="flex" align="middle" :gutter="8">
			<i-Col span="10">
				<Input v-model="tagName" style="width: 100%">
					<span slot="prepend" style="padding-left:5px;">标签名称：</span>
					<span
						class="ivu-icon ivu-icon-ios-search"
						slot="append"
						@click="getLabelList"
					></span>
				</Input>
			</i-Col>
			<i-Col span="14">
				<Button class="fr" type="info" @click="showModal()">
					新建标签
				</Button>
			</i-Col>
		</Row>

		<!-- 标签列表区域 -->
		<Table border :columns="columns1" :data="labelList">
			<template slot="addDate" slot-scope="{ row }">
				{{ row.addDate | dateFormat }}
			</template>
			<!-- 使用作用域插槽渲染按钮 -->
			<template slot-scope="{ row }" slot="action">
				<ButtonGroup>
					<Button type="primary" size="small" ghost @click="showModal(row)">
						修改
					</Button>
					<Button type="warning" size="small" @click="warning(row)" ghost>
						{{ row.state == 0 ? '启用' : '禁用' }}
					</Button>
					<Button type="error" ghost size="small" @click="remove(row)">
						删除
					</Button>
				</ButtonGroup>
			</template>
		</Table>

		<!-- 分页区域 -->
		<template>
			<Page
				:total="pageInfo.count"
				:page-size-opts="pageInfo.pageSizeArr"
				:current="pageInfo.page"
				:page-size="pageInfo.defaultPageSize"
				show-elevator
				show-total
				show-sizer
				@on-change="handleCurrentChange"
				@on-page-size-change="handleSizeChange"
			/>
		</template>

		<!-- 新建标签的对话框 -->
		<Modal
			v-model="modalVisible"
			title="新建标签"
			@on-visible-change="visibleChange"
		>
			<div :style="{ width: '280px', margin: '0 auto' }">
				<i-Form
					ref="formRef"
					:model="formData"
					:rules="formRules"
					:label-width="80"
				>
					<FormItem prop="id" v-show="false">
						<Input v-model="formData.id" />
					</FormItem>
					<FormItem label="标签名称" prop="tagName">
						<Input v-model="formData.tagName" placeholder="请输入标签名称" />
					</FormItem>
					<FormItem label="学科名称" prop="subjectID">
						<i-Select v-model="formData.subjectID" style="width:200px">
							<i-Option v-for="item in subjectList" :value="item.id" :key="item.id">
								{{ item.subjectName }}
							</i-Option>
						</i-Select>
					</FormItem>
				</i-Form>
			</div>
			<div slot="footer">
				<Button type="text" size="large" @click="modalVisible = false">取消</Button>
				<Button type="primary" size="large" @click="submitForm">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	data() {
		return {
			columns1: [
				{ type: 'index', title: '序号', width: 80, align: 'center' },
				{ title: '标签名称', key: 'tagName' },
				{ title: '学科名称', key: 'subjectName' },
				{ title: '创建日期', slot: 'addDate' },
				{ title: '面试题数量', key: 'totals', align: 'center', width: '120px' },
				{ title: '创建者', key: 'username', align: 'center', width: '120px' },
				{ title: '操作', slot: 'action', align: 'center' }
			],
			// 数据获取成功，保存请求回来的用户列表数据
			labelList: [],
			counts: 0,
			tagName: '',

			// 控制新建标签对话框的显示与隐藏
			modalVisible: false,
			// 新建标签的标签数据
			formData: {
				id: '',
				tagName: '',
				subjectID: ''
			},
			// 新建标签的验证规则对象
			formRules: {
				tagName: [{ required: true, message: '请输入标签名', trigger: 'blur' }],
				subjectID: [
					{
						required: true,
						type: 'number',
						message: '请选择学科名',
						trigger: 'change'
					}
				]
			},
			// 存放禁用标签id
			params: '',
			// 学科列表
			subjectList: []
			// 控制对话框的异步关闭
			// loading: true
		}
	},
	created() {
		// 通过this来调用函数
		this.getLabelList()
		this.subjectSelect()
	},
	methods: {
		// 定义获取标签列表函数
		async getLabelList() {
			// 发送请求获取标签列表数据
			const { data: res } = await this.$http.tags(
				this.getQueryParams({ tagName: this.tagName })
			)
			// 如果返回状态正常，将请求的数据保存在data中
			// console.log(res);
			this.labelList = res.items
			console.log(this.labelList)

			this.pageInfo.count = res.counts
		},
		// 学科列表
		async subjectSelect() {
			const res = await this.$http.simpleSub()
			this.subjectList = res
			console.log(res)
		},
		// 监听 pagesize 改变的事件
		handleSizeChange(newSize) {
			this.pageInfo.pagesize = newSize
			this.getLabelList()
		},
		// 监听 页码值 改变的事件
		handleCurrentChange(newPage) {
			this.pageInfo.defaultPageSize = newPage
			this.getLabelList()
		},
		// 新建标签
		submitForm() {
			this.$refs.formRef.validate(async valid => {
				if (!valid) return

				if (this.formData.id) {
					const { data: res } = await this.$http.editTagsRequest(this.formData)
					console.log('编辑', res)
				} else {
					const { data: res } = await this.$http.newTags(this.formData)
					console.log('新建', res)
				}

				this.$Message.success('操作成功！')
				this.getLabelList()
				this.modalVisible = false
				this.$refs.formRef.resetFields()
			})
		},
		// 关闭对话框时，清空重置表单内容
		visibleChange(visible) {
			if (!visible) this.$refs.formRef.resetFields()
		},
		// 点击修改按钮显示修改对话框
		showModal(row) {
			if (row) {
				this.formData.id = row.id
				this.formData.tagName = row.tagName
				this.formData.subjectID = row.subjectID
			}
			this.modalVisible = true
		},
		// 禁用按钮
		async warning(row) {
			row.state = row.state == 0 ? 1 : 0
			const { data: res } = await this.$http.tagsIdState(row.id, row.state)
			this.getLabelList()
		},
		// 删除按钮
		remove(row) {
			const that = this
			this.$Modal.confirm({
				title: '提示',
				content: '<h3>请问您确认要删除学科标签吗?</h3>',
				okText: '删除',
				cancelText: '算了',
				async onOk() {
					const res = await that.$http.deleteTags(row.id)
					if (res.success) {
						that.$Message.success('删除成功')
						that.getLabelList()
					} else {
						that.$Message.error('删除失败')
					}
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.ivu-breadcrumb {
	margin-bottom: 20px;
	font-size: 12px;
}

span {
	font-size: 12px;
}

.ivu-page {
	margin-top: 15px;
	margin-top: 20px;
	text-align: right;
}

.ivu-modal-confirm-head {
	margin-bottom: 30px;
}

.ivu-input-group .ivu-input {
	height: 40px;
}

.ivu-table-wrapper {
	margin-top: 20px;
}
</style>
